<template>
  <div class="toplist">
    <div class="top-center">
      <div class="left">
        <!-- 导航 -->
        <nav-list :topData="topData"></nav-list>
      </div>
      <div class="right" v-loading="loading" element-loading-text="拼命加载中">
        <top-header :topList="topList"></top-header>
        <top-table :topList="topList" :songList="songList"></top-table>
        <top-commit-input
          :topList="topList"
          :getAllComment="getAllComment"
        ></top-commit-input>
        <comments :total="total" :comments="comments" :info="info"></comments>
        <!-- 分页 -->
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
          :current-page="commentsInfo.offset / commentsInfo.limit + 1"
          :page-size="commentsInfo.limit"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 底部 -->
    <main-footer></main-footer>
  </div>
</template>

<script>
import { ListDetail } from '@/utils/class.js'
import { getTopList, getrecommendTop, getAllComment } from '@/api/api.js'
import navList from './components/navList.vue'
import TopHeader from './components/topHeader.vue'
import TopTable from './components/topTable.vue'
import TopCommitInput from './components/topCommitInput.vue'
import MainFooter from '../../components/common/mainFooter.vue'
import Comments from '../../components/common/comments.vue'

export default {
  components: {
    navList,
    TopHeader,
    TopTable,
    TopCommitInput,
    MainFooter,
    Comments
  },
  data() {
    return {
      // 导航数据
      topData: [],
      // 排行榜详细数据
      topList: {},
      // 歌曲详情
      songList: [],
      loading: true,
      // 总评论数
      total: 0,
      commentsInfo: {
        limit: 20,
        offset: 0,
        before: ''
      },
      // 排行榜id
      id: 0,
      // 评论列表
      comments: [],
      // 点赞参数
      info: {
        type: 2
      }
    }
  },
  created() {
    this.getTopList()

    console.log(this.$route)
  },
  methods: {
    // 获取榜单
    async getTopList() {
      const { list: res } = await getTopList()
      console.log(res)
      // this.res.coverImgUrl + '?param=40y40'
      for (let item of res) {
        item.coverImgUrl += '?param=40y40'
      }
      this.topData = res

      // 榜单详情
      // const {playlist: res1} = await getrecommendTop(this.$route.query.id)
      if (this.$route.query.id) {
        const { playlist: res1 } = await getrecommendTop(this.$route.query.id)
        let a = this.topData.find((item) => {
          return item.id == this.$route.query.id
        })

        res1['updateFrequency'] = a.updateFrequency
        this.topList = res1
      } else {
        const { playlist: res1 } = await getrecommendTop(res[0].id)
        res1['updateFrequency'] = res[0].updateFrequency
        this.topList = res1
        this.topList.coverImgUrl += '?param=150y150'
      }
      console.log(this.topList)
      // 榜单歌曲详情
      this.id = this.topList.id
      this.getAllComment()

      let listAll = []

      this.topList.tracks.forEach((item1, index) => {
        let a = Math.floor(item1.dt / 1000)
        item1.dt =
          `${Math.floor(a / 60)}`.padStart(2, '0') +
          ':' +
          `${a % 60}`.padStart(2, '0')
        listAll.push(new ListDetail(item1, index))
      })

      // for (let item1 of this.topList.tracks) {
      //   let a = Math.floor(item1.dt / 1000);
      //   item1.dt =
      //     `${Math.floor(a / 60)}`.padStart(2, "0") +
      //     ":" +
      //     `${a % 60}`.padStart(2, "0");
      //   listAll.push(new ListDetail(item1));
      // }

      this.loading = false
      this.songList = listAll
      for (let i = 0; i < 3; i++) {
        this.songList[i].al1.picUrl += '?param=46y46'
      }
      console.log(this.songList)
    },
    // 获取评论
    async getAllComment() {
      const res = await getAllComment(this.id, this.commentsInfo)
      this.total = res.total
      this.comments = res.comments
      console.log(res)
    },
    // 切换页数
    handleCurrentChange(newPage) {
      this.commentsInfo.offset = (newPage - 1) * this.commentsInfo.limit
      this.getAllComment()
    }
  },
  watch: {
    $route() {
      this.getTopList()
    }
  }
}
</script>

<style lang="scss" scoped>
.toplist {
  height: 1000px;
  .top-center {
    display: flex;
    margin: 0 auto;
    width: 980px;
    background: #fff;
    border: 1px solid #d3d3d3;
    .left {
      width: 240px;
      background: #f9f9f9;
      border-right: 1px solid #d3d3d3;
    }
    .right {
      width: 740px;
    }
  }
}
.el-pagination {
  margin: 30px 160px 160px 160px;
}
</style>
